<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import type { Ref } from 'vue';
//引入管理员相关的小仓库
import useAdminStore from '@/store/modules/admin'; // 命名导入
let adminStore = useAdminStore();

// 定义数据类型
interface ClassData {
  classId: number;
  adminUsername: string;
  className: string;
  classStudentNumber: number;
  adminId: number;
}
// 定义表格数据的类型
interface GroupData {
  studentName: string;
  studentId: number;
  studentNumber: string;
  groupProName: string;
  groupScore: number;
  studentFinish: number;
  groupId: number

}

const value = ref('')
// 初始化 options
const options = ref<Array<{ value: number; label: string }>>([]);

// 生成 options 函数
const generateOptionsFromTableData = () => {
  const newOptions = adminStore.tableData.map((item: ClassData) => ({
    value: item.classId,
    label: item.className,
  }));
  options.value = newOptions;
};

// 在组件挂载时调用生成 options
onMounted(async () => {
  await adminStore.fetchTableData({ page: 1, pageSize: 10 });
  generateOptionsFromTableData();
});


// 监听 value 的变化
watch(value, async (newVal) => {
  console.log('Value changed:', newVal); // 添加日志
  if (newVal !== null) {
    await fetchDataByClassId();
  }
});

// 初始化 tableData 使用正确的类型
const tableData: Ref<GroupData[]> = ref([]);
// 根据 classId 获取数据
const fetchDataByClassId = async () => {
  // 打印 adminStore 以确认方法存在
  console.log('AdminStore:', adminStore);
  if (value.value !== null) {
    await adminStore.fetchTableStudentsData({
      classId: value.value,
      page: page.currentPage,
      pageSize: page.pageSize,
    });
    tableData.value = adminStore.tableStudentsData;
    // 打印 tableData 以检查 studentFinish 字段
    console.log('Table Data:', tableData.value);

    // 检查每个对象中的 studentFinish 字段
    tableData.value.forEach(item => {
      console.log('Student Finish:', item.studentFinish);
    });
  }
};


// 计算属性用于转换 groupFinish 的值
const finishStatusMap = computed(() => {
  return {
    0: '未开始',
    1: '需求分析进行中',
    2: '概要设计进行中',
    3: '详细设计',
    4: '软件编码',
    5: '测试',
    6: '完成'
  };
});

// 辅助函数用于获取完成进度描述
const getFinishStatus = (status: number): string => {
  console.log('Finish Status Map:', finishStatusMap.value);
  console.log('Current Status:', status);
  // @ts-ignore
  const statusText = finishStatusMap.value[status];
  console.log('Mapped Status Text:', statusText);
  return statusText || '未知状态';

};
//导出小组得分
const exportScore = async () => {
  try {
    console.log("导出学生成绩");
    await adminStore.exportStudentScore(value.value); // 假设 classId 是你需要传递的参数
  } catch (error) {
    console.error('下载失败:', error);
    throw new Error('下载失败');
  }

}



//分页相关
//分页相关
let page = reactive({ currentPage: 1, pageSize: 100, total: 10 });


</script>

<template>
  <div>
    <div class="top">
      <el-select v-model="value" class="m-2" placeholder="班级选择" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button type="primary" style="float: right" v-debounce:500="exportScore">导出学生评分</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="studentName" label="学生姓名" />
      <el-table-column prop="studentNumber" label="学号" />
      <el-table-column prop="groupProName" label="项目名" />
      <el-table-column label="完成进度">
        <template #default="{ row }">
          {{ getFinishStatus(row.studentFinish) }}
        </template>
      </el-table-column>
      <el-table-column prop="groupScore" label="分数" />
    </el-table>

  </div>
</template>

<style scoped lang="scss">
.top {
  margin-bottom: 15px;
}
</style>